<template>
  <div class="q-container">
    <div class="header-wapper">
      <menu-compon />
    </div>
    <!-- Swiper轮播图 -->
    <div class="home-banner">
      <swiper-home />
      <div class="q-home-search">
        <div class="search-title">
          <div @click="curId = 0" :class="{ current: curId === 0 }">
            <i class="el-icon-collection"></i>
            看攻略
          </div>
          <div @click="curId = 1" :class="{ current: curId === 1 }">
            <i class="el-icon-document"></i>
            做行程
          </div>
          <div @click="curId = 2" :class="{ 'current-two': curId === 2 }">
            <i class="el-icon-office-building"></i>
            特价酒店
          </div>
        </div>
        <div class="search-context">
          <div v-show="curId === 0">
            <input type="text" placeholder="搜目的地/攻略/问题" />
            <el-button icon="el-icon-search">搜索旅游攻略</el-button>
          </div>
          <div v-show="curId === 1">
            <span>穷游行程助手，一分钟搞定你的攻略</span>
            <div class="h-search-two">
              <el-button icon="el-icon-search">免费私人订制</el-button>
              <el-button
                icon="el-icon-plus"
                style="background-color: #ffe300; color: #3c3c3c; border: 0"
              >
                构造行程
              </el-button>
            </div>
          </div>
          <div v-show="curId === 2" class="current-context">
            <input type="text" placeholder="搜城市/机场/地标/酒店" />
            <el-button icon="el-icon-search" style="border: 0">
              搜索特价酒店
            </el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="section-gray">
      <div class="advertising">
        <div class="adve-img">
          <a href="">
            <img src="../assets/FrixbKwP9Ix2LdK6_5PZCBiPuf6u.jpg" alt="" />
          </a>
        </div>
        <div class="adve-img">
          <a href="">
            <img src="../assets/FgEsPIgusdCGRPNVGtlni8zbU8HD.png" alt="" />
          </a>
        </div>
      </div>
    </div>
    <!-- 今日推荐 -->
    <section-com :wapperTitle="wapperTitle" :cardContext="wapperContext" />
    <div class="section">
      <div class="loading-more">
        <div class="more-btn">
          <my-menu :menuVal="menuVal1" @click.native="loadingMore('/home')" />
          <my-menu :menuVal="menuVal2" @click.native="loadingMore('/about')" />
        </div>
      </div>
    </div>
    <router-view />
    <!-- 底部 -->
    <div class="q-home-footer">
      <div class="footer">
        <div class="footer-inner">
          <div>
            <p>关于我们</p>
            <div style="margin-top: 10px">
              <li>联系我们</li>
              <li>穷游简介</li>
              <li>合作伙伴</li>
            </div>
          </div>
          <div>
            <p>加入我们</p>
            <div style="margin-top: 10px">
              <li>职位招聘</li>
            </div>
          </div>
          <div>
            <p>网站条款</p>
            <div style="margin-top: 10px">
              <li>会员条款</li>
              <li>社区指南</li>
              <li>免责声明</li>
              <li>版权声明</li>
            </div>
          </div>
          <div>
            <p>帮助中心</p>
            <div style="margin-top: 10px">
              <li>新手上路</li>
              <li>使用帮助</li>
              <li>网站地图</li>
              <li>旅行工具</li>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 回到顶部 -->
    <el-backtop :bottom="150" :visibility-height="50">
      <div class="up-top">
        <i class="el-icon-arrow-up"></i>
      </div>
    </el-backtop>
  </div>
</template>

<script>
import menuCompon from "../components/MenuCompon.vue";
import swiperHome from "../components/SwiperHomeCom.vue";
import sectionCom from "../components/SectionCom.vue";
import MyMenu from "@/components/MyBtnCompon.vue";
import base from "@/api/base.js";

export default {
  components: {
    menuCompon,
    swiperHome,
    sectionCom,
    MyMenu,
  },
  data() {
    return {
      curId: 0,
      wapperTitle: "今日推荐",
      wapperContext: [],
      menuVal1: "查看更多游记",
      menuVal2: "其他精彩内容",
    };
  },
  methods: {
    loadingMore(val) {
      this.$router.push(val);
    },
    queryAll() {
      this.resUrl = base.host;
      this.$api.queryAllImg("queryTitleData").then((res) => {
        this.wapperContext = res.data;
      });
    },
  },
  created() {
    this.queryAll();
    console.log(this.$store.state.LoginModules.testVal);
  },
};
</script>

<style scoped lang="less">
@media screen and (min-width: 320px){
  .home-banner, .section-gray, .q-home-footer{
    width: 1220px;
  }
}
@media screen and (min-width: 1220px){
  .home-banner, .section-gray, .q-home-footer{
    width: 100%;
  }
}
.current {
  background-image: linear-gradient(
    90deg,
    rgba(40, 213, 164, 0.8),
    rgba(38, 208, 181, 0.8)
  );
  font-weight: 600;
}

.current-two {
  background-image: linear-gradient(
    90deg,
    rgba(83, 144, 250, 0.8),
    rgba(95, 126, 248, 0.8)
  );
  font-weight: 600;
}

.current-context {
  height: 50px;
  background-image: linear-gradient(
    90deg,
    rgba(83, 144, 250, 0.8),
    rgba(112, 77, 255, 0.8)
  );
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;

  /deep/.el-button {
    background-image: linear-gradient(90deg, #ff168f, #ff5854);
    border: transparent;
  }
}

.header-wapper{
  width: 100%;
  position: absolute;
  z-index: 2;
}

.home-banner {
  height: 506px;
  position: relative;
}

.section-gray {
  height: 152px;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
}

.advertising {
  margin: 0 auto;
  height: 110px;
  display: flex;
  flex-direction: row;

  .adve-img {
    height: 110px;
    margin: 0 10px;

    img {
      height: 100%;
    }
  }
}

.q-home-search {
  width: 800px;
  height: 130px;
  position: absolute;
  top: 50%;
  //transform: translate(-50%);
  left: calc(50% - 400px);
  z-index: 2;
  display: flex;
  flex-direction: column;

  .search-title {
    width: 100%;
    height: 60px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-weight: 100;
    div {
      flex: 1;
      height: 100%;
      text-align: center;
      line-height: 60px;
      color: white;
      font-size: 22px;
      border-top-left-radius: 6px;
      border-top-right-radius: 6px;
      background-color: rgba(0, 0, 0, 0.75);
    }

    div:hover {
      font-weight: 500;
    }
  }

  .search-context {
    width: 100%;
    height: 70px;
    background-image: linear-gradient(
      90deg,
      rgba(21, 219, 145, 0.8),
      rgba(6, 204, 199, 0.8)
    );
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    color: white;

    .h-search-two {
      float: right;
      margin-top: -8px;
      margin-right: 0;
    }

    div {
      padding: 10px 5px 10px 8px;

      /deep/.el-button {
        height: 50px;
        margin-left: 10px;
        background-color: transparent;
        color: white;
        font-size: 20px;
        font-weight: 600;
        border: 2px solid white;
      }

      input {
        width: 582px;
        height: 50px;
        outline: none;
        border: none;
        text-indent: 25px;
        font-size: 20px;
        border-radius: 5px;
      }

      span {
        line-height: 55px;
        margin: 0 0px 0 60px;
        font-weight: 600;
        font-size: 20px;
        float: left;
      }
    }
  }
}

.loading-more {
  width: 1200px;
  margin: 0 auto 20px;
}

.more-btn {
  width: 500px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  div {
    flex: 1;
    text-align: center;
  }
}

.q-home-footer {
  height: 235px;
  background-color: #333;
  border-top: #2aaf55 5px solid;

  .footer {
    width: 1160px;
    height: 100%;
    margin: 0 auto;
  }

  .footer-inner {
    padding-top: 20px;
    display: flex;
    flex-direction: row;

    div {
      width: 155px;
      height: auto;
      color: white;

      p {
        border-left: 5px solid #2aaf55;
        font-weight: 600;
        padding-left: 18px;
      }

      li {
        padding-left: 23px;
        font-size: 15px;
        line-height: 30px;
      }

      li:hover {
        color: #959595;
        transition: color 0.5s;
        cursor: pointer;
      }
    }
  }
}

.up-top {
  width: 100%;
  height: 100%;
  background-color: #f2f5f6;
  text-align: center;
  line-height: 40px;
  color: #2aaf55;
  border: 1px solid #b2b2b2;
}
</style>